import React from 'react';
import { Card, List } from 'antd';
import { 
  RocketOutlined, 
  AppstoreOutlined, 
  LineChartOutlined,
  BookOutlined
} from '@ant-design/icons';
import { Link } from 'react-router-dom';

const QuickAccess: React.FC = () => {
  const quickLinks = [
    {
      id: 1,
      title: '技术前沿',
      icon: <RocketOutlined style={{ fontSize: 24 }} />,
      description: '了解AI最新技术进展',
      link: '/tech'
    },
    {
      id: 2,
      title: 'AI应用场',
      icon: <AppstoreOutlined style={{ fontSize: 24 }} />,
      description: '探索AI在各行业的应用',
      link: '/app'
    },
    {
      id: 3,
      title: '发展洞察',
      icon: <LineChartOutlined style={{ fontSize: 24 }} />,
      description: '把握AI发展趋势',
      link: '/insight'
    },
    {
      id: 4,
      title: '学习资源',
      icon: <BookOutlined style={{ fontSize: 24 }} />,
      description: 'AI学习资料与教程',
      link: '/learn'
    }
  ];

  return (
    <Card title="快速入口" bordered={false}>
      <List
        grid={{ gutter: 16, column: 1 }}
        dataSource={quickLinks}
        renderItem={item => (
          <List.Item>
            <Link to={item.link}>
              <Card hoverable>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ marginRight: 16 }}>{item.icon}</div>
                  <div>
                    <h4 style={{ margin: 0 }}>{item.title}</h4>
                    <p style={{ margin: 0, color: '#999' }}>{item.description}</p>
                  </div>
                </div>
              </Card>
            </Link>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default QuickAccess; 